<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2019/11/1
  Time: 10:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>账号注册</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        window.onload = function (ev) {
            //name   cardid   password  repassword
            var elementById1 = document.getElementById("name");
            var elementById2 = document.getElementById("password");
            var elementById3 = document.getElementById("repwd");
            var elementById4 = document.getElementById("cardid");
            var elementById = document.getElementById("sub_btn");
            var flag = true;


            var n = document.getElementById("n");
            var p = document.getElementById("p");
            var p2 = document.getElementById("p2");
            var e = document.getElementById("d");

            var name = null;
            var password = null;
            var repwd = null;
            var email = null;

            //当账号获取焦点时候，h5标签的东西失去
            elementById1.onfocus = function (ev1) {
                n.innerHTML = "";
            }
            //账号的失去焦点事件
            elementById1.onblur = function (ev1) {
                name = elementById1.value;
                // 帐号是否合法:允许5-16字节，允许字母数字下划线
            //^[a-zA-Z0-9_]{4,15}$
                //长度3-20所哟字符
                var reg = /^.{3,20}$/;
                var b = reg.test(name);
                if (!b) {
                    n.innerHTML = "格式不正确"
                    n.style.color = "red";
                    flag = false;
                } else {
                    n.innerHTML = "";
                    flag = true;
                }
            }

            //当密码获取焦点时候，h5标签的东西失去
            elementById2.onfocus = function (ev1) {
                p.innerHTML = "";
            }
            //密码的失去焦点事件
            elementById2.onblur = function (ev1) {
                password = elementById2.value;
                // 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)
                var reg1 = /^[a-zA-Z]\w{5,17}$/;
                var b = reg1.test(password);
                if (!b) {
                    p.innerHTML = "格式不正确"
                    p.style.color = "red";
                    flag = false;
                } else {
                    flag = true;
                }

            }

            //当确认密码获取焦点时候，h5标签的东西失去
            elementById3.onfocus = function (ev1) {
                p2.innerHTML = "";
            }
            //确认密码的失去焦点事件
            elementById3.onblur = function (ev1) {
                repwd = elementById3.value;
                // 确认密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)
                var reg1 = /^[a-zA-Z]\w{5,17}$/;
                var b = reg1.test(repwd);
                if (!b) {
                    p2.innerHTML = "格式不正确"
                    p2.style.color = "red";
                    flag = false;
                } else {
                    flag = true;
                }

            }

            //当身份证获取焦点时候，h5标签的东西失去
            elementById4.onfocus = function (ev1) {
                e.innerHTML = "";
            }
            //身份证的失去焦点事件
            elementById4.onblur = function (ev1) {
                email = elementById4.value;
                //E身份证
                var reg2 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
                var b = reg2.test(email);
                if (!b) {
                    e.innerHTML = "格式不正确"
                    e.style.color = "red";
                    flag = false;
                } else {
                    flag = true;
                }
            }

            //提交！！！
            elementById.onclick = function (ev2) {

                if (name == "" || password == "" || name == null || password == null || repwd == "" || repwd == null) {
                    alert("账号或密码不能为空")
                    return false;      //取消事件函数（事件行为），当点提交返回一个false时候，就代表取消form事件的提交
                }
                if (email == "" || email == null) {
                    alert("身份证不能为空")
                    return false;      //取消事件函数（事件行为），当点提交返回一个false时候，就代表取消form事件的提交
                }
                if (password != repwd) {
                    alert("俩次输入的密码不同")
                    return false;      //取消事件函数（事件行为），当点提交返回一个false时候，就代表取消form事件的提交
                }
                //这里写一个这是因为全局看，只要有false就不提交
                return flag;
            }
        }
    </script>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <h3 class="text-center text-success">
                        账号注册
                    </h3>
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-md-12 column">

                    <form role="form" action="Servlet" method="get">
                        <input type="hidden" name="method" value="regist">
                        <div class="form-group">
                            <label for="cardid">身份证号</label><input type="text" class="form-control" id="cardid" name="cardid"/>
                        </div>
                        <h5 id="d"></h5>
                        <div class="form-group">
                            <label for="name">用户名</label><input type="text" class="form-control" id="name" name="name"/>
                        </div>
                        <h5 id="n"></h5>
                        <div class="form-group">
                            <label for="password">密码</label><input type="text" class="form-control" id="password" name="password"/>
                        </div>
                        <h5 id="p"></h5>
                        <div class="form-group">
                            <label for="repwd">确认密码</label><input type="text" class="form-control" id="repwd" />
                        </div>
                        <h5 id="p2"></h5>
                        <button type="submit" class="btn btn-default" id="sub_btn">注册</button>
                    </form>
                    <a href="login.jsp">返回</a>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>
